import React, { useState, useEffect } from 'react'
import { connect } from 'umi';
import { Row, Col, Button, Space, notification } from 'antd'
import Mobile from './components/mobile'
import Drawer from '../wechatEdit/components/Drawer'
import ShareApp from './components/ShareComponents';
import './index.less'
const wechatHome = (props) => {
    const { dispatch } = props
    const [visible, setVisible] = useState(false)
    const [data, setData] = useState({})
    const [shareVisible, setShareVisible] = useState(false);
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        dispatch({
            type: 'wechatPage/fetchPageConfigDetail',
            payload: {
                pageType: "home"
            },
            callback: (e = {}) => {
                const { id, pageConfig = '{}' } = e
                if (id) {
                    setData({
                        ...JSON.parse(pageConfig),
                        id
                    })
                }
                console.log(e)
            }
        })
    }
    const copyList = e => {
        const textToCopy = e
        // 创建一个虚拟input元素
        const input = document.createElement('input')
        input.value = textToCopy
        document.body.appendChild(input)
        // 选择输入框的内容
        input.select()
        input.setSelectionRange(0, 99999) // 兼容移动设备
        // 执行复制操作
        document.execCommand('copy')
        // 移除虚拟input元素
        document.body.removeChild(input)
        // 可以显示一条消息或者执行其他操作
        notification.success({
            message: '温馨提示',
            description: `复制成功`,
        })
    }
    return <div style={{ display: 'flex' }} gutter={[24, 24]}>
        <Mobile data={data}></Mobile>
        <div style={{ flex: '1', marginLeft: '24px' }}>
            <Row gutter={[12, 12]}>
                <Col className='right-title' span={24}>搭建店铺主页</Col>
                <Col className='right-desc' span={24}>左图是店铺的预览效果</Col>
                <Col className='home-page-desc' span={24}>主页是用户看到店铺的第一印象，店铺主页支持同时应用于移动店铺和微信小程序。</Col>
                <Col span={24}>
                    <Space>
                        <Button onClick={() => {
                            setShareVisible({
                                show: true,
                            });
                        }} type='primary'>分享店铺主页</Button>
                        <Button onClick={() => {
                            setVisible({
                                show: true,
                                type: 'home',
                                detail: data
                            })
                        }} type='primary'>搭建店铺主页</Button>
                    </Space>

                </Col>
            </Row>
        </div>
        <Drawer handleCallback={fetchData} visible={visible} onClose={() => setVisible(false)}></Drawer>
        <ShareApp visible={shareVisible} onClose={() => setShareVisible(false)}></ShareApp>
    </div>
}

export default connect(({ weCom, loading }) => ({
    loading: loading.models.wechatPage,
}))(wechatHome)
